<template>
  <div class="app-container DailyReimbursement">
    <div class="top-box">
      <!-- 快速筛选 -->
      <div class="select">
        <comSelect :options="comSelectOptions"></comSelect>
      </div>

      <!-- 查询 -->
      <div class="form">
        <comForm :list="comFormList"></comForm>
      </div>

      <!-- 批量操作 -->
      <div class="btn-box">
        <!-- 按钮组 -->
        <comMb8Button
          :config="comMb8ButtonConfig_btnBox"
          @handle="clickBtnGroup_btnBox"
        ></comMb8Button>
      </div>
    </div>

    <comTable
      :list="comTableList"
      :modes="comTableMode"
      :pagination="comTablePagination"
      :config="comTableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <el-table-column
        :width="'143px'"
        class="operate"
        align="left"
        label="操作"
      >
        <template #default="{ row }">
          <!-- 按钮组 -->
          <comMb8Button
            :config="comMb8ButtonConfig_Table"
            @handle="clickBtnGroup_Table(arguments, row)"
          ></comMb8Button>
        </template>
      </el-table-column>
    </comTable>
  </div>
</template>

<script>
import comTable from "@/wss/components/comTable.vue";
import comSelect from "@/wss/components/comSelect.vue";
import comForm from "@/wss/components/comForm.vue";
import comMb8Button from "@/wss/components/comMb8Button.vue";

export default {
  name: "DailyReimbursement",
  components: {
    comTable,
    comSelect,
    comForm,
    comMb8Button,
  },

  data() {
    return {
      //------快速筛选------//
      comSelectOptions: {
        value: "all",
        title: "快速筛选",
        list: [
          {
            value: "all",
            label: "所有状态",
          },
          {
            value: "accounting",
            label: "待核算",
          },
          {
            value: "rejected",
            label: "被驳回",
          },
          {
            value: "completed",
            label: "已完成",
          },
        ],
      },
      //------From--------//
      comFormList: {
        modes: [
          {
            placeholder: "请输入报销单号",
            formType: "input",
            label: "报销单号",
            mode: "name",
            value: "",
          },
          {
            placeholder: "请输入员工姓名",
            formType: "input",
            label: "员工姓名",
            mode: "name",
            value: "",
          },
          {
            placeholder: "",
            formType: "datePicker",
            label: "筛选时间",
            mode: "selectDate",
            pickerType: "monthrange",
            rangeSeparator: "～",
            startPlaceholder: "开始月份",
            endPlaceholder: "结束月份",
          },
        ],
      },
      //------Table--------//
      comTableMode: [
        {
          type: "selection", //多选列
        },
        {
          label: "申请时间",
          mode: "申请时间",
          align: "center",
          width: "153px",
        },
        {
          label: "凭证号",
          mode: "凭证号",
          align: "center",
        },
        {
          label: "工号",
          mode: "工号",
          align: "center",
        },
        {
          label: "员工姓名",
          mode: "员工姓名",
          align: "center",
        },
        {
          label: "用户手机号",
          mode: "用户手机号",
          align: "center",
          width: "110px",
        },
        {
          label: "摘要",
          mode: "摘要",
          align: "center",
        },
        {
          label: "报销金额（元）",
          mode: "报销金额",
          align: "center",
        },
      ],
      comTableList: [],
      comTablePagination: {
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      },
      comTableConfig: {
        loading: false,
      },
      //------- Button -------//
      comMb8ButtonConfig_btnBox: [
        {
          label: "批量确认",
          type: "primary",
          icon: "el-icon-check",
          clickBtn: "",
          vHasPermi: "",
          btnId: "confirm",
        },
        /* {
          label: "批量驳回",
          type: "",
          icon: "el-icon-close",
          clickBtn: "",
          vHasPermi: "",
          btnId: "reject",
        }, */
      ],
      comMb8ButtonConfig_Table: [
        {
          label: "确认",
          type: "primary",
          icon: "",
          clickBtn: "",
          vHasPermi: "",
          btnId: "confirm",
        },
        {
          label: "驳回",
          type: "",
          icon: "",
          clickBtn: "",
          vHasPermi: "",
          btnId: "reject",
        },
      ],
    };
  },

  mounted() {
    let fakeItem = {
      申请时间: "2021-08-15 16:08:21",
      凭证号: "wss202108180983489",
      工号: "wss0001",
      员工姓名: "曹建国",
      用户手机号: "12345678910",
      摘要: "购买办公用品",
      报销金额: "5000.00",
    };
    this.comTableList = Array(10).fill(fakeItem);
  },

  methods: {
    //------- 分页 -------//
    // pageSize 改变时会触发	每页条数
    handleSizeChange(val) {
      this.comTablePagination.pageSize = val;
      //this.getWageList(this.comTablePagination);
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      this.comTablePagination.pageNum = val;
      //this.getWageList(this.comTablePagination);
    },

    //------- 操作栏按钮 -------//
    //按钮组事件
    clickBtnGroup_Table(childParams, row) {
      console.log("clickBtnGroup_Table：", childParams[0], childParams[1], row);
    },
    clickBtnGroup_btnBox(btnType, btnId) {
      console.log("clickBtnGroup_btnBox：", btnType, btnId);
    },
  },
};
</script>

<style lang="scss" scoped>
.DailyReimbursement {
  .top-box {
    .select {
      padding-bottom: 10px;
    }
    .form {
      padding-top: 10px;
    }
    .btn-box {
      .title {
        margin-right: 12px;
        font-size: 14px;
        font-weight: bold;
        color: #606266;
      }
      padding-bottom: 10px;
    }
  }
  ::v-deep .mb8 {
    //样式穿透
    margin-bottom: 0px;
  }
}
</style>